import React  from 'react';
import PropTypes from 'proptypes';

const DatabaseFilter=React.forwardRef((props,ref_filter)=>{
  const  filter=React.useRef(null);
  const onFilterChange=(event)=> {
    props.onFilterChange(event.target.value);
  }

  const focus=()=> {
    ref_filter.current.focus();
  }

    //console.log("render DatabaseFilter");
    //console.log(this.props);

    var { value, placeholder, isFetching } = props;
    if (!value) value = '';
    return (
      <div className={`ui icon input ${isFetching ? 'loading' : ''}`}>
        <input
          type="text"
          placeholder={placeholder || 'Search...'}
          value={value}
          ref={ref_filter}
          disabled={isFetching}
          onChange={onFilterChange}
        />
        <i className="search icon" />
      </div>
    );
});
export default DatabaseFilter;